<template>
      <el-dialog :title="form.id?'编辑人员':'新增人员'" :visible="visible"  :before-close="handleclose" >
  <el-form ref="form" label-width="120px" size="mini" :rules='rules' :model='form'>
   <el-form-item label="人员名称：" style="width:83%;hight:46px" prop="userName" >
    <el-input
  type="text"
  v-model="form.userName"
  placeholder="请输入"
  maxlength="5"
  show-word-limit
>
</el-input>
      </el-form-item>
  <el-form-item label="角色："  prop="role">
    <el-select  placeholder="请选择" style="width:80%" v-model="form.role" clearable>
      <el-option 
      label="运营员" value="运营员"
     ></el-option>
     <el-option 
      label="维修员" value="维修员"
     ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="联系电话：" style="width:83%;hight:46px" prop="mobile">
    <el-input
    v-model="form.mobile"
  type="text"
  placeholder="请输入"
  maxlength="11"
  show-word-limit
>
</el-input>
  </el-form-item>
  <el-form-item label="负责区域：" prop="regionName" clearable>
    <el-select  placeholder="请选择" style="width:80%" v-model="form.regionName" >
      <el-option 
      v-for="item in list" :key="item.id"
      :label="item.regionName"
       :value="item.id"
     ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="头像：" prop="image" >
    <el-upload
  list-type="picture-card" 
  :file-list="fileList"
  action="#"
  :on-remove="remove"
  :on-change="change"
  :http-request="httpRquest"
  :limit="limit"
  :class="fileList.length === limit ? 'hideAdd' : ''"
  :before-upload="beforeUpload"
  :on-preview="handlePictureCardPreview"
  >
  <i  class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<p>支持扩展名：jpg、png，文件不得大于100kb</p>
<el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </el-form-item>
  <el-form-item label="状态：" >
    <el-checkbox label="状态" checked><span>是否启用</span></el-checkbox>
  </el-form-item>
  
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="handleclose">取 消</el-button>
    <el-button type="primary" @click='submit'>确 认</el-button>
  </div>
</el-dialog>
</template>

<script>
// import {addRoleList,editRoleList} from "@/api/role"

export default {
    props: {
      visible:true,
      limit:{
        type:Number,
        default:1
      },
      list:{
        type:Array,
        default:() => []
      }
    },
    data() {
        return {
          fileList:[],
          dialogVisible:false,
          dialogImageUrl:'',
          form:{
           pageIndex: 0,
           pageSize: 10,
           totalCount: 0,
           totalPage:0,
          },
          // params:{
          //  image:'',
          //  mobile:'',
          //  regionId:'',
          //  regionName:'',
          //  roleId:'',
          //  status:'',
          //  userName:"",
          // },
          rules:{
            userName: [
          {required: true, message: '人员名称必填', trigger: 'blur' }, 
          // {min: 0, max: 5, message: '人员名称为1-5位'}
           ],
           role:[
           {required: true, message: '角色必填', trigger: 'change' }, 
           ],
           mobile:[
           {required: true, message: '手机号码必填', trigger: 'blur' }, 
           {pattern:/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,message: '手机号码格式有误', trigger: 'blur'}
           ],
           regionName:[
           {required: true, message: '负责区域必填', trigger: 'change' },
           ],
           image:[
          //  {required: true, message: '头像必填', trigger: 'blur' },
           ]
          },
        }
    },
    
    created() {

    },
    mounted() {

    },
  
    methods: {
      handleclose() {
        this.$emit('update:visible',false)
        // 清空表单 检验结果  恢复初始状态
      this.$refs.form.resetFields()
      this.form = {}
      },
       async submit() {
        await this.$refs.form.validate()
      // this.form.id ? await editRoleList (this.form)  : await addRoleList (this.form)
      //  console.log(res);
      this.$message.success(`${this.form.id?'编辑':'新增'}成功`)
      this.handleclose() 
      this.$parent.getRoleList()
      },
      remove(file,fileList) {
        this.fileList = fileList
      },
      change(file,fileList) {
        this.fileList = fileList
      },
      httpRquest(data) {
        console.log(data);
        if(this.httpRquestSelf) {
           this.httpRquestSelf(data.file)
           return
        }
      },
      handlePictureCardPreview(file) {
        this.dialogVisible = true
        this.dialogImageUrl = file.url
      },
      beforeUpload(file) {
        // 图片类型
        const types = ['image/jpeg', 'image/png']
        if(!types.includes(file.type)) {
          this.$message.warning('上传图片只能是 JPG、PNG 格式!')
          return false
        }
        // 检查大小
        const maxSize = 0.1 * 1024 * 1024
        if (maxSize < file.size) {
         this.$message.error('图片大小最大不能超过100kb')
          return false
        }
       return true
       }
    },
    watch:{
    form:{
      handler(val) {
        console.log(val);
        // val 最新数据  
        this.fileList = [{url:val.image}]
      }
    }
  },
    
};
</script>

<style lang='scss'>
.hideAdd .el-upload--picture-card {
  display: none;
}
</style>